<template>
  <div class="header">
   <van-search
    v-model="searchValue"
    :placeholder="seachHot"
  />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref,onBeforeUnmount, computed } from 'vue'
import { hot } from '@/services/search'

const useHot = ()=> {
  const seachList = ref<any[]>([])
  const searchValue = ref('')
  hot().then(res=>{
    seachList.value = res.data.result.hots
  })
  let index = ref(0)
  const seachHot = computed(()=>{
    return seachList.value[index.value]?.first||''
  })
  const onSearch = ()=>{

  }
  const onCancel = () => {

  }
  const time = setInterval(()=>{
    if(index.value>=seachList.value.length-1){
      index.value = 0
    }else{
      index.value++
    }
  },1500)
  onBeforeUnmount(()=>{
    clearInterval(time)
  })
  return {
    seachHot,
    searchValue,
    onSearch,
    onCancel
  }
}

export default defineComponent({
  name: 'AppHeader',
  setup () {
    return {
      ...useHot()
    }
  }
})
</script>

<style lang="scss" scoped>
.header{
  .show{
    margin: 0 auto;
    width: 90vw;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #999;
    border-radius: 20px;
  }
}
</style>
